/* 导入 Tailwind 的基础样式 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 自定义基础样式 */
@layer base {
  /* 平滑滚动 */
  html {
    scroll-behavior: smooth;
  }

  /* 自定义选中文本颜色 */
  ::selection {
    @apply bg-primary-500 text-white;
  }

  /* 自定义焦点样式 */
  *:focus {
    @apply outline-none ring-2 ring-primary-500 ring-offset-2;
  }

  /* 标题样式 */
  h1 {
    @apply text-4xl font-bold;
  }

  h2 {
    @apply text-3xl font-semibold;
  }

  h3 {
    @apply text-2xl font-semibold;
  }

  /* 链接默认样式 */
  a {
    @apply text-primary-600 hover:text-primary-700 transition-colors;
  }
}

/* 自定义组件样式 */
@layer components {
  /* 按钮组件 */
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 
           focus:outline-none focus:ring-2 focus:ring-offset-2 
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  .btn-primary {
    @apply btn bg-primary-600 text-white hover:bg-primary-700 
           focus:ring-primary-500 active:bg-primary-800;
  }

  .btn-secondary {
    @apply btn bg-gray-200 text-gray-900 hover:bg-gray-300 
           focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 
           dark:hover:bg-gray-600;
  }

  .btn-outline {
    @apply btn border-2 border-primary-600 text-primary-600 
           hover:bg-primary-600 hover:text-white focus:ring-primary-500;
  }

  /* 输入框组件 */
  .input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg 
           focus:ring-2 focus:ring-primary-500 focus:border-transparent 
           dark:bg-gray-800 dark:border-gray-600 dark:text-white
           placeholder-gray-400 dark:placeholder-gray-500;
  }

  /* 卡片组件 */
  .card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 
           border border-gray-200 dark:border-gray-700;
  }

  .card-hover {
    @apply card hover:shadow-xl transition-shadow duration-300 cursor-pointer
           hover:border-primary-500 dark:hover:border-primary-400;
  }

  /* 容器组件 */
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* 网格布局 */
  .grid-responsive {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6;
  }
}

/* 自定义工具类 */
@layer utilities {
  /* 文字渐变 */
  .text-gradient {
    @apply bg-gradient-to-r from-primary-500 to-secondary-500 
           bg-clip-text text-transparent;
  }

  /* 动画延迟 */
  .animation-delay-200 {
    animation-delay: 200ms;
  }

  .animation-delay-400 {
    animation-delay: 400ms;
  }

  /* 玻璃态效果 */
  .glass {
    @apply bg-white/70 dark:bg-gray-900/70 backdrop-blur-md;
  }

  /* 截断文本 */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 自定义滚动条 */
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: theme('colors.gray.400') theme('colors.gray.100');
  }

  .custom-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800 rounded-full;
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-600 rounded-full hover:bg-gray-500;
  }
}

/* 响应式工具类 */
@layer utilities {
  @variants responsive {
    /* 隐藏元素但保持可访问性 */
    .sr-only-focusable:focus {
      @apply not-sr-only;
    }
  }
}
